// Variables

//
// custom-variables.scss
//

// Shadow
$shadow:                0px 0px 35px 0px rgba(154, 161, 171, 0.15);
$shadow-lg:             0 0 45px 0 rgba(0, 0, 0, 0.12);

//Background left-sidebar
$bg-leftbar:            #f7f7f7;
$bg-leftbar-dark:           #343b4a;

// Leftbar width
$leftbar-width:         240px;

// Small Leftbar Width
$leftbar-width-sm:    160px;

// Dark leftbar menu color
$menu-item-color-dark:      #9097a7;
$menu-item-hover-color-dark:#c8cddc;
$menu-item-active-color-dark: #ffffff;

//Menu item colors
$menu-item:              #6e768e;
$menu-item-hover:        #00acc1;
$menu-item-active:       #00acc1;
$menu-sub-item-active:   #00acc1;

//Rightbar Width
$rightbar-width:           260px;

//Topbar Background
$bg-topbar-light:         #ffffff;
$bg-topbar-dark:          #545a6a;

// Font weight
$font-weight-semibold: 600;

// Dropdown Large
$dropdown-lg-width:    320px;

//
// Color system
//

// stylelint-disable
$gray-100: #f1f3fa;
$gray-200: #f7f7f7;
$gray-600: #98a6ad;
$gray-700: #8e99a2;
$gray-900: #323a46;

$grays: ();
$grays: map-merge((
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
), $grays);

$blue:       #4b88e4;
$indigo:     #675aa9;
$purple:     #6b5eae;
$pink:       #f672a7;
$red:        #f1556c;
$orange:     #fd7e14;
$yellow:     #f7b84b;
$green:      #25b343;
$teal:       #02a8b5;
$cyan:       #00acc1;


$colors: ();
$colors: map-merge((
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
), $colors);

$primary:       $cyan;
$secondary:     $gray-700;
$success:       $green;
$info:          $blue;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-200;
$dark:          $gray-900;

$theme-colors: ();
$theme-colors: map-merge((
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark,
  "pink":       $pink,
  "purple":     $purple
), $theme-colors);


// Customize the light and dark text colors for use in our YIQ color contrast function.

$yiq-text-dark: $gray-900;


// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-caret:              true;


// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer: 1.5rem;
$spacers: ();
$spacers: map-merge((
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3)
), $spacers);

// This variable affects the `.h-*` and `.w-*` classes.
$sizes: ();
$sizes: map-merge((
  15: 15%,
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%
), $sizes);


// Body
//
// Settings for the `<body>` element.

$body-bg:                   #ffffff;
$body-color:                $gray-700;


// Links
//
// Style anchor elements.

$link-color:                $primary;
$link-hover-color:          darken($link-color, 15%);
$link-hover-decoration:     none;


// Components
//
$component-active-bg:         $primary;

$caret-width:                 .25em;


// Fonts
//
// Font, line-height, and color for body text, headings, and more.

// stylelint-disable value-keyword-case
$font-family-sans-serif:      'Muli', sans-serif;
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
$font-family-base:            $font-family-sans-serif;

// stylelint-enable value-keyword-case
$font-size-base:              0.875rem;
$font-weight-bold:            700;

$headings-margin-bottom:      $spacer;
$headings-font-weight:        400;
$headings-line-height:        1.1;

$h1-font-size:                2.25rem;
$h2-font-size:                1.875rem;
$h3-font-size:                1.5rem;
$h4-font-size:                1.125rem;
$h5-font-size:                0.9375rem;
$h6-font-size:                0.75rem;

$display-line-height:         $headings-line-height;

$lead-font-size:              ($font-size-base * 1.25);

$small-font-size:             0.75rem;

$text-muted:                  $gray-600;

$blockquote-font-size:        ($font-size-base * 1.25);

$hr-border-color:             $gray-200;

$list-inline-padding:         6px;


// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.

$table-cell-padding:          .95rem;
$table-cell-padding-sm:       .5rem;

$table-accent-bg:             $gray-200;
$table-hover-bg:              $gray-200;

$table-border-color:          $gray-300;

$table-head-bg:               $gray-200;
$table-head-color:            $gray-700;

$table-dark-bg:               $gray-900;
$table-dark-border-color:     lighten($gray-900, 7.5%);
$table-dark-color:            $gray-600;


// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.

$input-btn-padding-y:         .45rem;
$input-btn-padding-x:         .90rem;

$input-btn-focus-width:       .15rem;
$input-btn-focus-color:       rgba($primary, .25);
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .28rem;
$input-btn-padding-x-sm:      .8rem;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;


// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-line-height:             $input-btn-line-height;

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-line-height-sm:          $input-btn-line-height-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-line-height-lg:          $input-btn-line-height-lg;

$btn-font-weight:             $font-weight-normal;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;

$btn-link-disabled-color:     $gray-500;


// Allows for customizing button radius independently from global border radius

$btn-border-radius:           .15rem;
$btn-border-radius-lg:        .15rem;
$btn-border-radius-sm:        .15rem;


// Forms

$input-padding-y:                       $input-btn-padding-y;
$input-padding-x:                       $input-btn-padding-x;
$input-line-height:                     $input-btn-line-height;

$input-padding-y-sm:                    $input-btn-padding-y-sm;
$input-padding-x-sm:                    $input-btn-padding-x-sm;
$input-line-height-sm:                  $input-btn-line-height-sm;

$input-padding-y-lg:                    $input-btn-padding-y-lg;
$input-padding-x-lg:                    $input-btn-padding-x-lg;
$input-line-height-lg:                  $input-btn-line-height-lg;

$input-color:                           $body-color;
$input-border-width:                    1px;
$input-border-color:                    $gray-400;
$input-border-radius:                   0.2rem;

$input-focus-box-shadow:                none;
$input-focus-border-color:              darken($input-border-color,10%);

$input-placeholder-color:               $gray-500;

$input-height:                          calc(#{$input-height-inner} + #{$input-height-border});

$input-group-addon-border-color:        $input-border-color;

$custom-select-padding-y:           .45rem;
$custom-select-padding-x:           .90rem;
$custom-select-height:              $input-height;

$custom-control-indicator-checked-color:        $primary;
$custom-control-indicator-checked-bg:           $primary;

$custom-select-border-width:        $input-border-width;
$custom-select-border-color:        $input-border-color;
$custom-select-border-radius:       $border-radius;
$custom-select-focus-border-color:  $input-focus-border-color;
$custom-select-focus-box-shadow:    none;
$custom-control-indicator-focus-box-shadow:     0 0 0 1px $body-bg, $input-btn-focus-box-shadow;

$custom-file-color:                 $input-color;
$custom-file-height-inner:          calc(#{$input-height-inner} - 2px);
$custom-file-border-width:          $input-border-width;
$custom-file-focus-border-color:    $input-focus-border-color;
$custom-file-box-shadow:            none;
$custom-file-focus-box-shadow:      none;


// Dropdowns
//
// Dropdown menu container and contents.

$dropdown-padding-y:                .25rem;
$dropdown-border-color:             darken($light, 3%);

$dropdown-link-color:               $body-color;
$dropdown-link-hover-color:         $headings-color;

$dropdown-link-active-color:        $dark;
$dropdown-link-active-bg:           $gray-200;

$dropdown-item-padding-y:           .375rem;

$dropdown-header-color:             inherit;


// Navs
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;


// Pagination

$pagination-color:                  $dark;

$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;

$pagination-hover-color:            $dark;
$pagination-active-bg:              $component-active-bg;
$pagination-active-border-color:    $pagination-active-bg;


// Cards

$card-spacer-x:                     $spacer;
$card-border-width:                 $border-width * 2;
$card-border-color:                 $gray-200;
$card-cap-bg:                       $white;


// Tooltips

$tooltip-border-radius:             0.2rem;
$tooltip-padding-y:                 .4rem;
$tooltip-padding-x:                 .8rem;


// Popovers

$popover-border-color:              $gray-400;

$popover-header-bg:                 $gray-200;
$popover-header-padding-y:          .7rem;
$popover-header-padding-x:          .8rem;


// Badges

$badge-font-weight:                 $font-weight-bold;


// Modals

$modal-content-border-color:        transparent;
$modal-content-border-radius:       0.2rem;


// Progress bars

$progress-bar-bg:                   theme-color("primary");


// List group

$list-group-active-bg:              $component-active-bg;


// Breadcrumbs

$breadcrumb-padding-y:              $spacer/1.5;
$breadcrumb-padding-x:              0;
$breadcrumb-item-padding:           .5rem;

$breadcrumb-bg:                     transparent;
$breadcrumb-divider:                quote("\F142");
$breadcrumb-divider-color:          $gray-400;
$breadcrumb-active-color:           $gray-500;


// Close

$close-text-shadow:                 none;


// Code

$code-color:                        $cyan;